<template>
  <div class="erp-form-item">
    <erp-form-hidden
      v-if="item.type === 'hidden'"
      :field="item.field"
      :value="value"
      @value-change="handleValueChange"
    />
    <div v-else>
      <!--        头部换行-->
      <el-col
        v-if="lineFeed === 'head'"
        :span="24"
      />
      <!--        独占一行-->
      <el-col
        v-if="lineFeed === 'all'"
        :span="24"
      />

      <el-col
        :show-label="showLabel && (item.showLabel === undefined || item.showLabel === true)"
        :xs-col="xsCol"
        :sm-col="smCol"
        :md-col="mdCol"
        :lg-col="lgCol"
        :xl-col="xlCol"
        :label="item.title"
        :prop="item.field"
        :required="required"
        :rules="item.validate"
        :label-width="computedLabelWidth"
        :block="block"
        :col="item.col"
        :form-item-style="formItemStyle"
      >
        <erp-form-input
          v-if="item.type === 'input'"
          :title="item.title"
          :field="item.field"
          :value="value"
          :form="form"
          :props="item.props"
          :slots="item.slots"
          :extra="item.extra"
          @value-change="handleValueChange"
          @update-id-field="handleUpdateField"
        />
        <erp-form-select
          v-else-if="item.type === 'select'"
          :title="item.title"
          :field="item.field"
          :value="value"
          :form="form"
          :options="item.options"
          :props="item.props"
          :extra="item.extra"
          @update-id-field="handleUpdateField"
          @value-change="handleValueChange"
          @transmit-list="handleTransmitList"
        />
        <erp-form-tree-select
          v-else-if="item.type === 'treeSelect'"
          :title="item.title"
          :field="item.field"
          :value.sync="value"
          :props="item.props"
          :options="item.options"
          :extra="item.extra"
          @update-id-field="handleUpdateField"
          @value-change="handleValueChange"
        />
      </el-col>
      <el-col
        v-if="lineFeed === 'all'"
        :span="24"
      />
      <!--        尾部换行-->
      <el-col
        v-if="lineFeed === 'foot'"
        :span="24"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Col} from "element-ui";
const ErpFormHidden = () => import("@/components/erp/form/ErpFormHidden");
const ErpFormInput = () => import("@/components/erp/form/ErpFormInput");
const ErpFormSelect = () => import("@/components/erp/form/ErpFormSelect");
const ErpFormTreeSelect = () => import("@/components/erp/form/ErpFormTreeSelect");

Vue.use(Col);
/**
 * 表单项
 * @author maolin
 */
export default {
  name: "ErpFormItem",
  components: {
    ErpFormHidden,
    ErpFormInput,
    ErpFormSelect,
    ErpFormTreeSelect,
  },
  props: {
    /**
     * 显示表单项名称
     * @public
     */
    showLabel: {
      type: Boolean,
      default: true
    },
    /**
     * 表单项样式
     * @public
     */
    formItemStyle: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 表单项对象
     * [hidden](./ErpFormHidden.html#Props),
     * [input](./ErpFormInput.html#Props),
     * [inputNumber](./ErpFormInputNumber.html#Props),
     * [autoComplete](./ErpFormAutoComplete.html#Props),
     * [radio](./ErpFormHidden.html#Props),
     * [checkbox](./ErpFormHidden.html#Props),
     * [select](./ErpFormSelect.html#Props),
     * [switch](./ErpFormSwitch.html#Props),
     * [cascader](./ErpFormCascader.html#Props),
     * [date](./ErpFormDate.html#Props),
     * [upload](./ErpFormUpload.html#Props),
     * [slider](./ErpFormSlider.html#Props),
     * [treeSelect](./ErpFormTreeSelect.html#Props),
     * [modal](./ErpFormModal.html#Props),
     * [iconSelect](./ErpFormIconSelect.html#Props),
     * [tree](./ErpFormTree.html#Props),
     * [relateJson](./ErpFormRelateJson.html#Props),
     * [serialNumRule](./ErpFormSerialNumRule.html#Props),
     * [tinymce](./ErpFormTinymce.html#Props),
     * [customer](./ErpFormCustomer.html#Props),
     * [staff](./ErpFormStaff.html#Props),
     * [material](./ErpFormMaterial.html#Props),
     * [supplier](./ErpFormSupplier.html#Props),
     * [purOrder](./ErpFormPurOrder.html#Props),
     * [selOrder](./ErpFormSelOrder.html#Props),
     * [selOrderSend](./ErpFormSelOrderSend.html#Props),
     * [selOrderBack](./ErpFormSelOrderBack.html#Props),
     * [assignCustomer](./ErpFormAssignCustomer.html#Props),
     * @public
     */
    item: {
      type: Object,
      default () {
        return {
          type: 'input',
          title: '',
          field: '',
          value: '',
          col: {
            lineFeed: null,
            times: 1,
          },
          props: {},
          options: [],
          validate: []
        };
      }
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default: () => {}
    },
    /**
     * 当前表单项的值
     * @public
     */
    value: {
      default: null
    },
    /**
     * 表单项宽度
     * @public
     */
    labelWidth: {
      type: [Number, String],
      default: null
    },
    /**
     * <768px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    xsCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥768px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    smCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥992px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    mdCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥1200px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    lgCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥1920px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    xlCol: {
      type: Object,
      default: () => {}
    },

  },
  data () {
    return {
    };
  },
  computed: {
    computedLabelWidth () {
      return this.item && this.item.col && this.item.col.labelWidth ? this.item.col.labelWidth : this.labelWidth;
    },
    required () {
      let validate = this.item.validate;
      let required = false;
      if(validate && validate.length > 0) {
        for (let i in validate) {
          if (validate[i].required !== undefined && validate[i].required === true) {
            required = true;
            break;
          }
        }
      }
      return required;
    },
    rules () {
      let validate = this.item.validate;
      let field = this.item.field;
      let rules = {};
      rules[field] = validate;
      return rules;
    },
    block () {
      let times = this.item === undefined || this.item.col === undefined ? null : this.item.col.times;
      if(!times || isNaN(times) || times <= 0) {
        times = 1;
      }
      return times;
    },
    lineFeed () {
      let lineFeed = this.item === undefined || this.item.col === undefined ? null : this.item.col.lineFeed;
      if (lineFeed !== 'head' && lineFeed !== 'foot' && lineFeed !== 'all') {
        lineFeed = null;
      }
      return lineFeed;
    },
  },
  watch: {
    // 'value' (value, oldValue) {
    //     this.$emit('value-change', {
    //         value: value,
    //         field: this.item.field
    //     })
    // }
    // labelWidth: {
    //     immediate: true,
    //     handler (r) {
    //         console.log(r);
    //     }
    // }
  },
  mounted() {

  },
  methods: {
    /**
     * 通知父组件值更新
     * @param {any} value 值
     * @public
     */
    handleValueChange (value) {
      /**
       * 通知父组件值更新
       * @param {object} value {value: 值, field:字段}
       * @public
       */
      this.$emit('value-change', {
        value: value,
        field: this.item.field
      });
    },
    /**
     * 通知父组件更新表单其他值
     * @param {object} obj {表单项字段1: 表单项值1, 表单项字段2:表单项值2}
     * @public
     */
    handleUpdateField (obj) {
      /**
       * 通知父组件更新表单其他值
       * @param {object} obj {表单项字段1: 表单项值1, 表单项字段2:表单项值2}
       * @public
       */
      this.$emit('update-field', obj);
    },
    /**
     * 将表单项选项传递给父组件
     * @param {array} data 表单项选项
     * @public
     */
    handleTransmitList (data) {
      /**
       * 将表单项选项传递给父组件
       * @param {array} data 表单项选项
       * @public
       */
      this.$emit('transmit-list', data);
    }
  }

};
</script>

<style scoped>

</style>
